웹 기술로 만드는 협업형 여행 계획 플랫폼 TripTune

함께 여행계획을 작성하는 웹 프로젝트

TypeScript, Next, React, Material-UI, Tanstack-query, Zustand , WebSocket, Stomp.js

피그마로 간단한 프로토타입 목업 작업 진행
프론트엔드 전체 구성 및 작성
- 홈 화면
- 회원 정보
- 여행지 탐색
- 일정 만들기
- 마이페이지

피그마처럼 여럿이 함께 일정을 짜는 애플리케이션을 만들어보고 싶어서 시작한 프로젝트입니다.

성과
- 커스텀 fetch 함수로 인증이 필요한 API 요청을 일괄 관리.
- 토큰 만료 시 refresh token으로 자동 갱신하고, 실패하면 로그인 페이지로 리다이렉트해 인증 상태를 자동으로 처리.
- 여행 일정을 작성하는 도중 토큰이 만료돼도 입력 데이터가 날아가지 않도록 작업 연속성을 지킴.
선택 이유
- 401 같은 인증 실패 상황을 한곳에서 처리해 사용자 경험(UX)이 끊기지 않게 하려고 도입.
- React-Query와 Fetch를 역할별로 나눔:
  - React-Query는 무한스크롤처럼 데이터 캐싱이 핵심인 기능에 사용.
  - Fetch는 인증 요청처럼 실시간 처리가 중요한 곳에 사용.
- 중복 로직을 걷어내 API 호출부의 가독성과 유지보수성을 개선.
기대 효과
- 재로그인 빈도가 줄어 UX 개선.
- 인증·에러 처리 로직이 표준화돼 코드 일관성과 확장성 확보.
- 서버 리소스 사용이 줄고 시스템 안정성도 올라감.

성과
- 디바운스 로직을 커스텀 훅으로 만들어 입력 중 발생하는 과도한 서버 요청을 줄임.
- 실시간 검색 자동 완성으로 사용자 편의성을 끌어올림.
선택 이유
- 실시간 데이터 제공과 입력 반응 속도 사이의 균형을 잡으면서 서버 부하도 함께 줄이기 위해 도입.
기대 효과
- 서버 요청이 줄어 리소스를 더 효율적으로 사용.
- UX가 개선되고 검색 결과 신뢰도도 함께 올라감.

성과
- Zustand와 React-Query를 함께 써서 여행지 탐색 데이터를 전역 상태로 관리.
- 무한스크롤에서 React-Query로 데이터 캐싱과 API 호출을 최적화(staleTime·cacheTime 활용).
- 한 페이지만 따로 유지하지 않고 여러 페이지 간 데이터를 공유·캐싱하도록 설계.
선택 이유
- React-Query는 데이터 캐싱과 상태 관리에 잘 맞아, 서버 요청을 줄이고 UX를 개선하려고 도입.
- Fetch는 인증 요청처럼 실시간 처리가 필요한 영역에 따로 두어 역할을 명확히 나눔.
- Zustand는 직관적인 상태 관리 도구라 전역 상태 로직을 가볍게 정리할 수 있음.
기대 효과
- 중복 요청이 줄어 서버 리소스를 아낌.
- 상태 관리가 간단해지고 유지보수성도 개선.
- UX가 좋아지면서 서비스 전반의 품질이 올라감.

성과
- STOMP 기반 WebSocket으로 실시간 메시징과 과거 메시지 불러오기(무한 스크롤)를 구현.
- 연결이 끊겨도 회복되도록 재연결과 하트비트 로직을 설정.
선택 이유
- 실시간 통신이 필요한 기능에 WebSocket과 STOMP.js의 간결함·효율성이 잘 맞아서 선택.
기대 효과
- 사용자끼리 실시간으로 소통할 수 있어 UX 개선.
- 유지보수와 확장이 수월한 구조 확보.
- 메시지 전송과 로딩이 안정적으로 동작.

성과
- React DnD와 HTML5 Backend로 여행 일정 관리의 Drag and Drop(DnD) 기능을 구현.
- BFF(Backend-for-Frontend) 패턴을 적용해 외부 API의 여행 데이터와 클라이언트 상태(travelRoute)를 병합.
- 일정 순서를 직관적으로 바꾸고, 필요 없는 일정은 삭제 드롭 존(Delete Zone)으로 간단히 빼낼 수 있게 UI/UX를 다듬음.
선택 이유
- 사용자가 일정을 추가·정렬·삭제할 때 시각적이고 직관적으로 다룰 수 있게 해서 UX를 개선하려고 DnD 도입.
- BFF 패턴을 쓴 이유:
  - 클라이언트에 필요한 데이터만 가공해 전달하므로 프론트엔드의 데이터 처리 부담이 줄어듦.
  - 데이터 병합이나 order 필드 추가 같은 맞춤형 가공을 서버 쪽에서 처리해 UI 로직과 데이터 로직을 분리.
- React DnD와 HTML5 Backend는 React 생태계와 호환이 좋고, 복잡한 상태 관리를 줄여주면서 컴포넌트 기반 설계와도 잘 맞다고 판단.
기대 효과
- 사용자 만족도: 실시간 시각 피드백과 잘 정리된 데이터 구조로 더 나은 경험을 제공.
- 유지보수 효율: 컴포넌트 기반 설계와 BFF 패턴 덕분에 UI와 데이터 처리 로직을 나누고 확장 여지도 확보.
- 업무 생산성: 데이터 가공을 BFF로 옮기면서 클라이언트 복잡도가 낮아지고 작업 시간도 단축.